<template>
  <view>
    <!-- 标题 -->
    <!-- 用户信息区 -->
	<view style="width:100%;height: 200px;position: relative;">
		<image :src="mineUrl" style="width: 100%;height: 100%;" ></image>
		<view class="user-info">
		  <view class="avatar">
		    <image style="width: 100%;height: 100%;border-radius: 50%;" :src="avatar" placeholder-class="placeholder-avatar"></image>
		  </view>
		  <view class="user-details">
		    <view v-if="userName" class="username" style="font-size: 14px;font-weight: bold;">{{userName}}</view>
		    
		  </view>
		</view>
	</view>
	<view class="container">
    
    <!-- 功能图标区 -->
    <!-- <view class="function-icons">
      <view class="icon-item">
        <image src="/static/signIn.png" mode="aspectFit"></image>
        <text>分享报名</text>
      </view>
      <view class="icon-item">
       <image src="/static/register.png" mode="aspectFit"></image>
        <text>分享登记</text>
      </view>
      <view class="icon-item">
        <image src="/static/loggin.png" mode="aspectFit"></image>
        <text>分享签到</text>
      </view>
    </view> -->
    <!-- 邀请好友横幅 -->
    <!-- <view class="invite-friend">
      <text>邀请好友来国酱通</text>
    </view> -->
    <!-- 列表项 -->
	<view style="font-size: 14px ;font-weight: bold;margin-bottom: 20px;">
		我的功能
	</view>
    <view class="">
    	<view class="list-item" v-for="(item,index) in codeList" :key="index" @click="shareCode(item)">
			<uni-icons type="scan" size="24" style="margin-right: 10px;"></uni-icons>
    	    <!-- <image src="https://via.placeholder.com/24x24" mode="aspectFit"></image> -->
    	    <text style="font-size: 14px;">{{item.qrCodeTypeName}}</text>
    	</view>
		
		<!-- <view class="list-item">
		    <uni-icons type="list" size="24" style="margin-right: 10px;"></uni-icons>
		    <text style="font-size: 14px;">我的邀请</text>
		</view> -->
    </view>
    <!-- <view class="list-item">
      <navigator url="/path/to/evaluation">
        <image src="https://via.placeholder.com/24x24" mode="aspectFit"></image>
        <text>我的评价</text>
      </navigator>
    </view>
    <view class="list-item" @click="navigatorPath">
      <navigator url="/path/to/inviteList">
        <image src="https://via.placeholder.com/24x24" mode="aspectFit"></image>
        <text>我的邀请</text>
      </navigator>
    </view> -->
    
    <!-- <view class="list-item">
      <navigator url="/path/to/contact">
        <image src="https://via.placeholder.com/24x24" mode="aspectFit"></image>
        <text>联系商家</text>
      </navigator>
    </view> -->
 	
 </view>
 <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" style="width: 40%;height: 300px;background-color: #fff;">
	 <view style="width: 300px;height: 400px;background-color: #fff;border-radius: 10px;padding: 10px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
	 	<image style="width: 250px;height: 250px;margin-bottom: 30px;" :src="codeUrl" mode="aspectFit"></image>
		<view class="">
			江老师的二维码
		</view>
	 </view>
	 </uni-popup>
	 <uni-popup ref="popupBottom" type="bottom">
	 	<view style="height: 360rpx;background-color: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;padding: 20px 15px;">
	 		<view style="font-size: 16px;font-weight: bold;color: #333;line-height: 32px;">
	 			你当前还未登录，是否登录？
	 		</view>
	 		<view style="font-size: 14px;font-weight: bold;color: #333;line-height: 28px;">
	 			用户隐私提示
	 		</view>
	 		<view style="font-size: 12px;line-height: 24px;color: #666;margin-bottom: 40px;">
	 			在您使用  国酱通  服务之前，如同意该服务对您的隐私保护指引，请点击“确认”开始使用本小程序
	 		</view>
	 		<view style="display: flex;justify-content: space-around;align-items: center;">
	 			<button 
	 			class="popup-button" style="background-color: #F2F2F2;color: #333;font-weight: 600;" @click="cancelPopup">取消</button>
	 			<button @click="getLogin" class="popup-button"
	 			 style="background-color: #409EFF;font-weight: 600;">确认</button>
	 			<!-- <button 
	 			class="popup-button"
	 			style="background-color: #2979ff;" open-type="getPhoneNumber" @="onGetPhoneNumber">确认授权</button> -->
	 		</view>
	 	</view>
	 </uni-popup>
	 <!-- <uni-popup ref="popupInfo" type="bottom">
	 	<view style="height: 360rpx;background-color: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;padding: 20px 15px;">
	 		<view style="display: flex;justify-content: space-around;align-items: center;">
	 			<button @tap="getUserProfile" open-type="getUserProfile"
	 			 style="background-color: #409EFF;font-weight: 600;">获取当前用户昵称和头像</button>
	 			<button 
	 			class="popup-button"
	 			style="background-color: #2979ff;" open-type="getPhoneNumber" @="onGetPhoneNumber">确认授权</button>
	 		</view>
	 	</view>
	 </uni-popup> -->
  </view>
</template>
<script>
	import {getMyQrCodeAppList,weChatQrCode,getPersonInfo} from '../../api/index.js'
	
	export default {
		data(){
			return{
				userInfo:{},
				avatar:'',
				userName:'',
				mineUrl:require('../../../static/mine_logo.jpg'),
				codeUrl:'',
				codeList:[]
			}
		},
		onLoad() {
			// this.$refs.popupInfo.open('bottom')
			if(!uni.getStorageSync('token')){
				this.$refs.popupBottom.open('bottom')
			}
			this.avatar =uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).avatarUrl : ""
			this.userName = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).nickName : ''
			if(uni.getStorageSync('token')){
				this.getPersonInfo()
				this.getCodePermision()
			}
			
		},
		methods:{
			cancelPopup(){
				this.$refs.popupBottom.close('bottom')
			},
			// 获取个人信息
			getPersonInfo(){
				getPersonInfo({token:JSON.parse(uni.getStorageSync('token'))}).then(res =>{
					console.log('res',res)
				})
			},
			getUserProfile() {
			      // 调用微信小程序的 getUserProfile 接口
			      wx.getUserProfile({
			        desc: '用于完善用户资料', // 声明用途
			        success: (res) => {
			          console.log('用户信息获取成功', res.userInfo);
			          this.userInfo = res.userInfo; // 保存用户信息
					  this.avatar = res.userInfo.avatarUrl
					  this.userName = res.userInfo.nickName
					  this.$refs.popupInfo.close()
			        },
			        fail: (err) => {
			          console.error('用户信息获取失败', err);
			        }
			      });
			    },
			getLogin(){
				uni.reLaunch({ url: '/pages/login/login' })
			},
			navigatorPath(){
				uni.navigateTo({
					url:'/pages/home/mine/inviteList'
				})
			},
			getCodePermision(){
				getMyQrCodeAppList({
					token:JSON.parse(uni.getStorageSync('token')),
					appPlatform:1
				}).then(res =>{
					this.codeList = res.data
				})
			},
			// 分享生成二维码
			shareCode(item){
				weChatQrCode({
					appPlatform:1,
					token:JSON.parse(uni.getStorageSync('token')),
					page:this.getPages(item.qrCodeTypeName),
					envVersion:'trail',
					qrCodeType:item.qrCodeType
				}).then(res =>{
					console.log(res)
					if(res.data.code == 200){
						this.codeUrl = res.data ? res.data : ''
						this.testNote = item.qrCodeTypeName
						this.$refs.popup.open('center')
					}else{
						uni.showToast({
							title: '分享失败',
							icon: "error",
						});
					}
					
				})
			},
			getPages(e){
				switch(e){
					case '分享物料二维码':
					return 'pages/index/computer';
					case '分享登记二维码':
					return 'pages/index/register';
					case '分享报名二维码':
					return 'pages/index/signUp';
					case '分享签到二维码':
					return 'pages/home/signIn/index';
					case '分享入住二维码':
					return 'pages/index/stay';
				}
			}
		}
	}
</script>
<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 10px;
  margin-top: 60px;
}
.title {
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
}
.user-info {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  position: absolute;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  bottom: -25%;
  width: 90%;
  left: 0%;
  right: 0%;
  margin: 0 auto;
}
.avatar {
  width: 80px;
  height: 80px;
  background-color: #333;
  border-radius: 50%;
  margin-right: 20px;
}
.placeholder-avatar {
  background-color: #eee;
}
.user-details {
  flex: 1;
}
.username {
  font-size: 18px;
}
.vip-info {
  font-size: 14px;
  color: #666;
}
.member-rights {
  color: #999;
  text-decoration: none;
}
.function-icons {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.icon-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  text-align: center;
}
.icon-item image {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.my-assets {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.asset-item {
  text-align: center;
}
.asset-item text:first-child {
  font-size: 16px;
  color: #333;
}
.asset-item text:last-child {
  font-size: 14px;
  color: #666;
}
.invite-friend {
  background-color: #f0f5ff;
  padding: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invite-friend text:first-child {
  font-size: 18px;
}
.invite-friend text:last-child {
  color: red;
}
.invite-btn {
  background-color: #ff4444;
  color: white;
  border-radius: 20px;
  padding: 8px 20px;
  border: none;
}
.list-item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.list-item image {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.list-item text {
  font-size: 16px;
}
.popup-button{
	font-size: 12px;
	line-height: 70rpx;
	height: 70rpx;
	background-color: darkgrey;
	color: #fff;
	border: unset;
	border-width: 0;
	width: 150px;				
}
/* 去除默认边框 */
button::after {
  border: none;
}
</style>